<template>
  <div id="saleSettleViewDiv">
    <Breadcrumb content="销售财务结算" />
    <div class="bodyContent">
      <el-tabs type="border-card" v-model="activeName" @tab-click="tabHandleClick">
        <el-tab-pane label="待结算" name="first">
          <SaleSettle ref="saleSettleRef" />
        </el-tab-pane>
        <el-tab-pane label="已结算" name="second">
          <SaleSettleEd ref="saleSettleEdRef" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script setup lang="ts">
// 引入组件区 ==========
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import Breadcrumb from '@/components/Breadcrumb.vue';
import moment from 'moment';
import { Splitpanes, Pane } from 'splitpanes';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示框
import { AppStore } from '@/stores/store'; //'../../../stores/store';
import { VXETable, VxeFormPropTypes, VxeFormInstance } from 'vxe-table';
import { IsEmpty, formatDateTime, autoIncrementNumber, sortByField } from '@/utils/common';
import SaleSettle from './SaleSettle.vue';
import SaleSettleEd from './SaleSettleEd.vue';

let activeName = ref('first');

let saleSettleRef = ref(null);
let saleSettleEdRef = ref(null);

// 页面加载时更新报告单元/字典
onMounted(async () => {
  if (activeName.value == 'first') {
    saleSettleRef.value.initPage();
  } else if (activeName.value == 'second') {
    saleSettleEdRef.value.initPage();
  }
});

function tabHandleClick(tab) {
  if (tab.props.name == 'first') {
    saleSettleRef.value.initPage();
  } else if (tab.props.name == 'second') {
    saleSettleEdRef.value.initPage();
  }
}
</script>

<style lang="scss" scoped>
#saleSettleViewDiv {
  height: 100%;
  .bodyContent {
    height: calc(100% - 60px);
    .el-tabs {
      height: 100%;

      :deep(.el-tabs__content) {
        height: calc(100% - 40px);
        padding: 0;

        .el-tab-pane {
          height: 100%;
        }
      }
    }
  }
}
</style>